<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="商品" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入品类关键词或商品ID" clearable style="width:200px" />
        </el-form-item>
        <el-form-item label="年份" prop="year">
          <el-select v-model="state.params.year" placeholder="不限" clearable>
            <el-option v-for="item in yearTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="month">
          <el-select v-model="state.params.month" placeholder="不限" clearable>
            <el-option v-for="item in monthTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="onClickCreate">创建推荐品类</el-button>
        <el-button type="primary" @click="importXlsx">导入</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #category_goods="{ row }">
          <div class="goods-item">
            <img :src="row.cover" class="goods-img" />
            <el-tooltip :content="row.title" placement="top">
              <p class="goods-title m-ellipsis--2">{{ row.title }}</p>
            </el-tooltip>
          </div>
        </template>
        <template #order_num="{ row }">
          <div>
            <span>{{ row.shop_num }}</span>
            /
            <span>{{ row.order_num }}</span>
          </div>
        </template>
        <template #actions="{ row }">
          <el-link type="primary" @click="onClickEdit(row)">编辑</el-link>
          <el-link type="danger" @click="onClickDel(row)">删除</el-link>
        </template>
      </k-table>
    </div>
  </PageListContainer>
  <EditDrawer ref="editModalRef" @after-submit="handleAfterSubmit" />
  <KDialog v-model="visible" width="small" title="选择导入文件" @cancel="cancelHandle" @submit="onClickSubmit">
    <el-upload
      ref="uploadRef"
      accept=".xlsx"
      drag
      limit="1"
      :on-change="changeFile"
      :on-remove="removeFile"
      :auto-upload="false"
    >
      <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
      <div class="el-upload__text">选择导入文件或拖拽上传</div>
    </el-upload>
  </KDialog>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useTableList, yearTypeOptions, monthTypeOptions } from './hooks/use-table';
import EditDrawer from './components/edit-drawer.vue';
import { AuthCode, hasPermission } from '@/modules/auth';
import { useDel } from '@crud/index';
import { investCalendarDelete, investCalendarImport } from '@/api/crm-kgj/calendar';
import { ElMessage } from 'element-plus';
defineOptions({
  name: 'KgjRecommendGoodsManage'
});
const { state, tableState, tableEvent, ...methods } = useTableList({});

// 新增编辑公用一个弹框；
const editModalRef = ref();

// 创建
const onClickCreate = () => {
  if (hasPermission(AuthCode.KGJ_CALENDAR_GOODS_EDIT)) {
    editModalRef.value.show(0);
  }
};

// 导入
const importXlsx=() => {
  if (hasPermission(AuthCode.KGJ_CALENDAR_GOODS_EDIT)) {
    visible.value=true;
  }
};

// 编辑
const onClickEdit = (row: any) => {
  if (hasPermission(AuthCode.KGJ_CALENDAR_GOODS_EDIT)) {
    editModalRef.value.show(1, row);
  }
};

/** 关闭抽屉后的回调 */
const handleAfterSubmit = () => {
  methods.onSearch();
};

const { onClickDel } = useDel({
  confirm: { title: '删除推荐品类', confirmButtonText: '确定', message: '是否删除推荐品类?' },
  del: async (data: any) => {
    if (hasPermission(AuthCode.KGJ_CALENDAR_GOODS_DEL)) {
      await investCalendarDelete({ id: data.id });
      ElMessage.success('删除成功');
      methods.getList();
    }

  }
});

// 获取文件
const visible = ref(false);
const rawFile: any = ref({});
const changeFile = (file: any) => {
  rawFile.value = file;
};

// 删除
const removeFile = () => {
  rawFile.value = {};
};

// 取消上传
const cancelHandle = () => {
  visible.value = false;
  uploadRef.value.clearFiles();
  removeFile();
};

// 上传导入
const uploadRef = ref();
const onClickSubmit = () => {
  if (!rawFile.value?.raw) {
    ElMessage.error('请选择上传文件');
    return;
  }
  investCalendarImport({ file: rawFile.value.raw }).then(() => {
    cancelHandle();
    methods.getList();
    ElMessage.success('上传成功');
  });
};

onMounted(() => {
  methods.getList();
});
</script>
<style lang="scss" scoped>
.goods-item {
  display: flex;
  padding: 12rpx 0;
  .goods-img {
    width: 47px;
    height: 47px;
  }
  .goods-title {
    flex: 1;
    margin-left: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 23rpx;
    color: #303133;
  }
}
</style>
